<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="base"
      th:with="pageTitle='详情页'">
<head>
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <link rel="stylesheet" th:href="@{/css/jquery.cleditor.css}">
    <script th:src="@{/ckeditor/ckeditor.js}"></script>
</head>
<body>
<th:block layout:fragment="custom_content">

    <el-table :data="tableData" v-loading.body="loading" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="50"></el-table-column>
        <el-table-column prop="title" label="标题" width="300"></el-table-column>
        <el-table-column prop="ruleMenuId" label="父目录" width="400"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" :formatter="dateFormat" width="180"></el-table-column>
        <el-table-column label="操作" width="200">
            <template scope="scope">
                <el-button size="mini" type="primary" @click="edit(scope.row.id)">编辑</el-button>
                <el-button size="mini" type="primary" @click="delete(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            layout="total, prev, pager, next"
            :total="total">
    </el-pagination>
</th:block>
<th:block layout:fragment="javascript">
    <script th:src="@{/node_modules/moment/moment.js}"></script>
    <script>
        var indexVue = new Vue({
            el: '#app',
            data: function () {
                return {
                    siderWidthDialog:false,
                    siderbarWidth:15,
                    form: {
                        title: '',
                        content: ''
                    },
                    tableData: [],
                    pageNum: 0,
                    total: 0,
                    breadcrumbs:['详情页'],
                    loading: false,
                    editRuleDialogVisible: false,
                    isCollapse: false,
                    defaultIndex: '1',
                    menus: [],
                    regulationMenus: [],
                    deptTrees:[]
                }
            },
            methods: {
                //时间格式化
                dateFormat: function (row, column) {
                    var date = row[column.property];
                    if (date == undefined) {
                        return "";
                    }
                    return moment(date).format("YYYY-MM-DD HH:mm:ss");
                },
                edit: function (id) {
                    // sessionStorage.setItem("id", id);
                    location.href = "/regulation/editregulation/"+id;
                },
                handleCurrentChange: function (val) {
                    search('${val}');
                },
                updateRule: function () {
                    var data = new Object();
                    data.title = $('#title').val();
                    data.content = CKEDITOR.instances.TextArea1.getData();

                    $.ajax({
                        cache: true,
                        url: '/regulation/updaterule',
                        type: 'POST',
                        data: JSON.stringify(data, "\t"),
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {
                            $this.$message('修改成功');
                            listVue.editRuleDialogVisible = false;
                            search(indexVue.pageNum);
                            // location.href = window.location.host+"/regulation/createmenu";
                        }
                    });

                },
                initMenu: function () {
                    var $this = this;
                    var data = commonInitMenu($this);
                },
                toggleMenu: function () {
                    this.isCollapse = !this.isCollapse;
                    window.localStorage.setItem('isCollapse',this.isCollapse);
                },
                changeSiderWidth:function(value){
                    changeSiderWidth(this,value);
                },
                openChangeSiderWidth:function(){
                    this.siderWidthDialog=true;
                }
            },
            created: function () {
                initCssProperty(this);
            }
        });

        //解析转义后的富文本标签
        function HTMLDecode(text) {
            var temp = document.createElement("div");
            temp.innerHTML = text;
            var output = temp.innerText || temp.textContent;
            temp = null;
            return output;
        }

        function search(pageNum) {
            indexVue.loading = true;
            var condition = {};
            condition['pageNum'] = indexVue.pageNum;
            $.ajax({
                cache: true,
                url: '/regulation/list',
                type: 'POST',
                data: JSON.stringify(condition),
                dataType: 'json',
                contentType: 'application/json',
                async: false,
                success: function (data) {
                    indexVue.loading = false;
                    if (data.status == 1) {
                        var pageInfo = data.value;
                        indexVue.tableData = pageInfo.list;
                        indexVue.pageNum = pageInfo.pageNum;
                        indexVue.total = pageInfo.total;
                    }
                }
            });
        }

        $(function () {
            indexVue.initMenu();
            search(1);
            changeFooterHeight();
        })
    </script>
</th:block>
</body>
</html>